function $(id){
	return document.getElementById(id);
};

// 获取类名（兼容IE6—8）
// 支持查找多个类名 getClassName(root, 'A B')
function getClassName(root, name){ 
	if(root.getElementsByClassName){
		return root.getElementsByClassName(name);
	}else{
		var elements=root.getElementsByTagName('*');
		var result=[];
		var element, classNameStr, flag;
		name=name.split(' ');
		for(var i=0; element=elements[i]; i++){ //循环元素合集
			classNameStr=' '+elements[i].className+' ';
			flag=true;
			for(var j=0; j<name.length; j++){	
				if(classNameStr.indexOf(' '+name[j]+' ')==-1){
					flag=false;
					break;
				}
			}
			if(flag) result.push(element);
		}
		return result;
	}
}

//请求参数序列化（将对象转换成字符串）
// {a:value, b:value} --> 'a=value&b=value' 
function serialize(data){
	if(!data){return ''};
	var arr=[];
	for(var name in data){
		if(!data.hasOwnProperty(name)) continue;
		if(typeof data[name]==='function') continue;
		var value=data[name].toString();
		name=encodeURIComponent(name);
		value=encodeURIComponent(value);
		arr.push(name+'='+value);
	}
	return arr.join('&'); 
}

//Ajax函数封装
function Ajax(url, data, callback){
	var ajax=new XMLHttpRequest();
	var URL=url+'?'+serialize(data);
	ajax.open('GET', URL, true);
	ajax.send(null);
	// ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //请求头部
	ajax.onreadystatechange=function(){ 
		// if(ajax.readyState==3) callback(ajax.readyState);
		if(ajax.readyState==4){
			if( (ajax.status>=200 && ajax.status<300) || ajax.status==304 ){ //304为读取缓存
				callback(ajax.responseText);
			}else{
				alert('request was unsuccessful '+ajax.status);
			}
		}
		// setTimeout(function(){
			
		// }, 10)
	}
}

//添加事件
function addEvent( node, ev, fn ){
	if (node.attachEvent) {
		return node.attachEvent( 'on'+ev, fn ); //IE
	}else{
		return node.addEventListener( ev, fn ); //Chrome FF
	}
}

//设置cookie
function setCookie(name, value, days){
	var cookie=name+'='+encodeURIComponent(value);
	if(typeof days==='number'){
		cookie+='; max-age='+(days*60*60*24);
	}
	document.cookie=cookie;
}

//删除cookie
function removeCookie(name){ 
	setCookie(name, '', 0);
};

//获取cookie
function getCookie(){
	var cookie={};
	var all=document.cookie;
	if(all==='') return cookie;
	var list=all.split('; ');
	for(var i=0; i<list.length; i++){
		var curr=list[i];
		var p=curr.indexOf('=');
		var name=curr.substring(0, p);
		var value=curr.substring(p+1);
		value=decodeURIComponent(value);
		cookie[name]=value;
	}
	return cookie;
}

// 判断是否有设置顶部消息cookie
function topCookie(){
	var topnav=$('j-topnav');
	var oHint=getClassName(topnav, 'hint')[0];
	if(getCookie().hint==='off'){ //匹配cookie
		topnav.style.display='none';
		return;
	}
	oHint.onclick=function(){ //注册事件
		setCookie('hint', 'off', 365); //设置cookie
		topnav.style.display='none';
	}
}
topCookie();

function login(){
	var oLogin=$('j-login'),
		oFoolowBut=getClassName(oLogin, 'follow-but')[0],
		oFoolowSuc=getClassName(oLogin, 'follow-suc')[0],
		oCancel=getClassName(oLogin, 'cancel')[0],
		oPopupLogin=getClassName(oLogin, 'popup-login')[0],
		oColse=getClassName(oLogin, 'colse')[0],
		oLoginBut=getClassName(oLogin, 'login-but')[0],
		oError=getClassName(oLogin, 'error')[0],
		oRemember=getClassName(oLogin, 'remember')[0];

	var	oInput=oPopupLogin.getElementsByTagName('input'), //合集中有4个input节点
		oLabel=oPopupLogin.getElementsByTagName('label');
	var errorText=['请输入帐号', '请输入密码' ];
	
	// 判断是否有设置登入cookie
	if( getCookie().loginSuc==='1' ){ 
		loginSuc();
	}

	// 显示登录成功
	function loginSuc(){ 
		oFoolowBut.style.display='none';
		oFoolowSuc.style.display='';
	}

	// 添加错误样式
	function addError(i){ 
		oInput[i].parentNode.className += ' red-bor'; //边框为红色
		oError.style.display=''; 
		oError.innerHTML=errorText[i]; //出现错误文字
	}

	// 删除错误样式
	function removeError(i, command){ 
		var classNameStr=oInput[i].parentNode.className; 
		if( classNameStr.indexOf(' red-bor')!==-1 || command ){ //清除红色提示框
			oInput[i].parentNode.className=classNameStr.replace(/\s.+/, ''); //匹配空白之后的都替换为空
			oError.style.display='none';
		}
		disableBut(false); //启用按钮
	}

	// 检查输入框
	function check(command){ 
		for(var i=0; i<2; i++){
			if ( command==='login' && !oInput[i].value ) { //点击登入 且输入框为空 
				addError(i);
				break;
			}
			if( command==='colse' ){ //关闭登入框后初始化，以确保再次进入
				oPopupLogin.style.display = 'none';
				oInput[i].value=''; 
				oLabel[i].style.display='';
				removeError(i, 'colse');
			}
		}
	}
	addEvent( oFoolowBut, 'click', function(){ 
		oPopupLogin.style.display = '';
	})

	addEvent( oColse, 'click', function(){ //关闭登入框
		check('colse'); //检查输入框 初始化
	}) 

	addEvent( document, 'keydown', function(ev){
		var oEvent=ev||event;
		if (oEvent.keyCode===27) {
			check('colse'); //检查输入框 初始化
		}
	})

	// 输入框事件
	function focus(i){ 
		addEvent( oInput[i], 'focus', function() { //焦点停靠
			oLabel[i].style.display = 'none';
			removeError(i);
		})
		addEvent( oInput[i], 'blur', function(){ //焦点离开
			if(!oInput[i].value) oLabel[i].style.display=''; 
		})
		addEvent( oInput[i], 'keydown', function(ev){ //键盘回车事件
			var oEvent=ev||event;
			if (oEvent.keyCode===13) loginRequest();
		})
	}
	focus(0);
	focus(1);

	// 按钮禁用
	function disableBut(boolean){ 
		if(!!boolean){
			oLoginBut.disabled=true;
			oLoginBut.className+=' disable-but';
		}else{
			oLoginBut.disabled=false;
			oLoginBut.className=oLoginBut.className.replace(/\s.+/, '');
		}
	}

	// 按钮点击
	addEvent( oLoginBut, 'click',  function(){ 
		loginRequest();
		disableBut(true); //禁用按钮
	}) 

	// 取消登录
	addEvent( oCancel, 'click', function(){ 
		removeCookie('loginSuc'); //删除cookie
		window.location.reload(); //刷新页面
	})

	// 登入请求
	function loginRequest() { 
		if (oInput[0].value && oInput[1].value) {
			var userName1 = hex_md5(oInput[0].value);
			var password1 = hex_md5(oInput[1].value);
			Ajax('http://study.163.com/webDev/login.htm', {
					userName: userName1,
					password: password1
				},
				function(i) {
					if( i===3 ){
						oLoginBut.innerHTML='登录中<span></span>';
						return;
					}else if( i === '1'){
						oLoginBut.innerHTML='登 录';
						if (!!oRemember.checked)  setCookie('loginSuc', '1', 10); //检查是否勾选'十天免登录'
						followRequest();
					}else{
						oLoginBut.innerHTML='登 录';
						oError.style.display=''; 
						oError.innerHTML='您输入的账号或密码有误！'; 
					}
				}
			)
		}
		check('login'); //检查输入框
	}

 	// 关注请求
	function followRequest() {
		Ajax('http://study.163.com/webDev/attention.htm', '',
			function(i) {
				if (i === '1') {
					setCookie('followSuc', '1', 365);
				}
			}
		)
		oPopupLogin.style.display = 'none';
		loginSuc(); //显示已登录
		check('colse'); //检查输入框 初始化
	}
}
login();

// 轮播
function slider(){
	var oSlider=$('j-slider');
	var oHref=oSlider.getElementsByTagName('a')[0],
		oImg=oSlider.getElementsByTagName('img')[0];
	var oUl=getClassName(oSlider, 'pointer')[0];
	var aLi=oUl.getElementsByTagName('li');
	var url=[ 
		{ src:'img/banner1.jpg', link:'http://open.163.com/' },
		{ src:'img/banner2.jpg', link:'http://study.163.com/'}, 
		{ src:'img/banner3.jpg', link:'http://www.icourse163.org/'}];

	// 初始化
	for(var i=0; i<url.length; i++){
		var oLi=document.createElement('li');
		oUl.appendChild(oLi);
	}
	aLi[0].className='active';
	oImg.src=url[0].src;
	oHref.href=url[0].link;
	var now=0;

	// 动态指示器水平居中
	var oWindow=document.documentElement.clientWidth;
	oUl.style.left=(oWindow-aLi.length*22)/2+'px';
	window.onresize=function(){
		oWindow=parseFloat(document.documentElement.clientWidth);
		oUl.style.left=(oWindow-aLi.length*22)/2+'px';
	}

	// 注册事件 
	for(var i=0; i<aLi.length; i++){
		aLi[i].index=i;
		aLi[i].onclick=function(){ //onclick在所有的浏览器下this指向是都是事件节点对象。
			if(this.index!=now) imgSwitch(this.index); //判断不相等的情况下调用,解决重复点击的情况。
		}
		/*addEvent(aLi[i], 'click', function(){
			imgSwitch(this.index); //attactEvent在IE8下this指向的是window
		});*/
	}

	// 图片切换
	function imgSwitch(i){
		for(var j=0; j<aLi.length; j++){
			aLi[j].className='';
		}
		oImg.style.opacity='0'; //让图片不可见（这里不产生过度效果）
		oImg.style.transition=''; 
		oImg.src=url[i].src;
		aLi[i].className='active';
		setTimeout(function(){ //在一定间隔时间后赋值才能产生动过度效果
			oImg.style.transition='0.5s';	
			oImg.style.opacity='1';
		}, 50);
		oHref.href=url[i].link;
		now=i;
	}

	// 定时器
	function interval(){
		timer=setInterval(function(){
			now=(now+1)%aLi.length;
			imgSwitch(now);
		}, 5000);
	}
	interval();

	addEvent(oImg, 'mouseover', function(){ clearInterval(timer); }); //鼠标移入清除定时器
	addEvent(oImg, 'mouseout', function(){ interval(); });
}
slider();  

// 课程
function course(){
	var oMain=$('j-main');
	var aTab=getClassName(oMain, 'tab')[0].getElementsByTagName('input');
	var aCourse=getClassName(oMain, 'course');
	var oPage=getClassName(oMain, 'page')[0];
	var aLi=oPage.getElementsByTagName('li');
	var curPage; //当前页码
	var pNum; // 显示产品个数

	var template=
	'<div class="m-team">\
		<img>\
		<p class="name j-name"></p>\
		<p class="provider j-provider"></p>\
		<span class="j-count"></span>\
		<strong></strong>\
		<a href="#" target="blank">\
			<img>\
			<h3 class="j-name"></h3>\
			<span class="j-count"></span>\
			<p class="j-provider"></p>\
			<p class="j-category"></p>\
			<p class="j-description"></p>\
		</a>\
	</div>';

	function getCourse(num, type){
		window.screen.width<=1205?pNum=15:pNum=20; // 当在<1205像素屏幕上时显示15个产品
		curPage=num;
		if(type===10) aCourse[0].innerHTML='';
		if(type===20) aCourse[1].innerHTML='';
		Ajax('http://study.163.com/webDev/couresByCategory.htm',
			{pageNo:num, psize:pNum, type:type}, //页码、 每页的个数、 类型筛选（10：产品设计；20：编程语言）
			function(data){
				data=JSON.parse(data); //解析成对象
				pushData( data, type );
				removePage(data);
				setPage(data, type);
			}
		)
	}

	getCourse(1, 10);
	
	
	// 推入数据
	function pushData(obj, type){
		var arrList=obj.list;
		for(var i=0; i<arrList.length; i++){
			var div=document.createElement('div');
			var rootNode, layout;
			var aImg, aName, aProvider, aCount, oA, oPrice, oCategory, oDescription;
			div.innerHTML=template;
			rootNode=div.querySelector('.m-team'); // 查询根选择器

			aImg=rootNode.getElementsByTagName('img');               // 图片
			aName=getClassName(rootNode, 'j-name');                  // 名称
			aProvider=getClassName(rootNode, 'j-provider');          // 提供商
			aCount=getClassName(rootNode, 'j-count');                // 学习人数
			oA=rootNode.getElementsByTagName('a')[0];                // a链接
			oPrice=rootNode.getElementsByTagName('strong')[0];       // 价格
			oCategory=getClassName(rootNode, 'j-category')[0];       // 分类
			oDescription=getClassName(rootNode, 'j-description')[0]; // 描述

			aImg[0].src=arrList[i].bigPhotoUrl;
			aImg[1].src=arrList[i].bigPhotoUrl;
			aName[0].innerHTML=arrList[i].name;
			aName[1].innerHTML=arrList[i].name;
			aProvider[0].innerHTML=arrList[i].provider;
			aProvider[1].innerHTML='发布者：'+arrList[i].provider;
			aCount[0].innerHTML=arrList[i].learnerCount;
			aCount[1].innerHTML=arrList[i].learnerCount+'在学';
			oA.href='http://study.163.com/course/introduction/'+arrList[i].id+'.htm';
			oPrice.innerHTML=arrList[i].price==0.00?'免费'+arrList[i].price:arrList[i].price;
			oCategory.innerHTML=arrList[i].category==null?'分类：无':'分类'+arrList[i].category;
			oDescription.innerHTML=arrList[i].description;

			layout=div.children[0];
			type===10?aCourse[0].appendChild(layout):aCourse[1].appendChild(layout);
		}
	}

	// 删除页码
	function removePage(data){
		for(var i=aLi.length-2; i>0; i-- ){
			oPage.removeChild(aLi[i]);
		}
	}

	// 设置页码
	function setPage(obj, type){
		var oPrev=getClassName(oMain, 'prev')[0];
		var oNext=getClassName(oMain, 'next')[0];
		var pageCount=Math.ceil(obj.totalCount/pNum);
		oPrev.onclick=function(){ // 上一页点击
			if(curPage===1) return;
			if(type===10){
				getCourse(curPage-1, 10);
			}else{
				getCourse(curPage-1, 20);
			}
		}
		oNext.onclick=function(){ // 下一页点击
			if(curPage===pageCount) return;
			if(type===10){
				getCourse(curPage+1, 10);
			}else{
				getCourse(curPage+1, 20);
			}
		}
		for(var j=0; j<pageCount; j++){ // 添加页码数
			var oLi=document.createElement('li');
			oLi.innerHTML=j+1;
			oLi.index=j+1;
			oLi.onclick=function(){ // 页码数点击
				if(curPage===this.index) return; // 避免重复点击
				if(type===10){
					getCourse(this.index, 10);
				}else{
					getCourse(this.index, 20);
				}
				curPage=this.index;
			};
			oNext.parentNode.insertBefore(oLi, oNext);
		}
		aLi[curPage].className='active';
	}

	// 课程切换
	function tab(i){
		aTab[i].onclick=function(){
			for(var j=0; j<aTab.length; j++){
				aCourse[j].style.display='none';
				aTab[j].className='';
			}
			aCourse[i].style.display='';
			aTab[i].className='cur';
			i===0?getCourse(1, 10):getCourse(1, 20);
		}
	}
	tab(0);
	tab(1);
}
course();

// 视频
function video(){
	var mVideo=$('j-video');
	var oVideo=mVideo.getElementsByTagName('video')[0];
	var oPlayIcon=getClassName(mVideo, 'play-icon')[0],
		oPopupVideo=getClassName(mVideo, 'popup-video')[0],
		oColse=getClassName(mVideo, 'colse')[0];
	oPlayIcon.onclick=function(){
		oPopupVideo.style.display='';
	}
	oColse.onclick=function(){
		if(!oVideo.paused) oVideo.pause(); // 判断是否暂停
		oVideo.currentTime=0; // 当前播放位置
		oPopupVideo.style.display='none';
	}
}
video();

// 最热推荐
function list(){
	var mList=$('j-list');
	var oWarp=getClassName(mList, 'warp-3')[0],
		oList=getClassName(mList, 'list')[0];
	var template=
	'<a target="blank" href="#">\
		<div><img></div>\
		<p></p>\
		<span></span>\
	</a>';

	// 请求数据
	Ajax('http://study.163.com/webDev/hotcouresByCategory.htm', {},
		function(data) {
			data = JSON.parse(data);
			pushData(data);
		}
	);

	// 推入数据
	function pushData(data){
		var oA, oImg, oP, oSpan;
		for(var i=0; i<data.length; i++){	
			var div=document.createElement('div');

			div.innerHTML=template;
			oA=div.querySelector('a');
			oImg=oA.getElementsByTagName('img')[0];
			oP=oA.getElementsByTagName('p')[0];
			oSpan=oA.getElementsByTagName('span')[0];	

			oA.href='http://study.163.com/course/introduction/'+data[i].id+'.htm';
			oImg.src=data[i].smallPhotoUrl;
			oP.innerHTML=data[i].name;
			oSpan.innerHTML=data[i].learnerCount;

			oList.appendChild(div.children[0]);
		}
	}

	var timer=null;

	// 缓冲运动
	function startMove(node, target) {
		clearInterval(timer);
		timer = setInterval(function() {
			var cur=node.offsetTop; // 获取当前的top值
			var speed = (target - cur) / 10; // 缓冲运动 距离越小速度越慢
			speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
			if (cur == target) { // 判断是否到达
				clearInterval(timer);
				return;
			}
			oList.style.top = cur + speed + 'px';
		}, 30);
	}

	// 定时器
	setInterval(function() {
		var cur = oList.offsetTop;
		if (cur <= -70 * 10) { // 判断是否到尾
			startMove(oList, 0); // 回到第一个
			return;
		}
		startMove(oList, cur + -70);
	}, 5000);
}
list();